<template>
    <Layout>
        <Form ref="form1"   :label-width="120">
            <Row class="query-form" style="padding-top: 15px">
                <Col span="8">
                     <FormItem label="用户名：">
                        <Input class="query-form-el" v-model="userName" ></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="企业名称：">
                        <Input class="query-form-el" v-model="orgName" ></Input>
                    </FormItem>
                </Col>
                <Col span="8" v-if="switchFlag">
                    <FormItem label="登陆时间：">
                        <DatePicker type="datetimerange" format="yyyy-MM-dd HH:mm"  placeholder="请选择登陆时间"
                                    v-model="twoDate"></DatePicker>
                    </FormItem>
                </Col>
                <Col span="8" v-else>
                    <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text"  >展开∨</Button>
                    <Button @click="reset" class="ivu-btn-reset"  >重置</Button>
                    <Button   class="ivu-btn-query"   icon="md-search"  @click="query">查询</Button>
                </Col>
            </Row>
            <Row  v-show="switchFlag" class="query-form" style="padding-top: 15px">
                <Col span="8">
                    <FormItem label="组织机构：">
                        <cascader-dom ref="queryOrgCascader" :orgTree='true' @setOrgInfo='setOrgInfo' :rootAffordIf="true"></cascader-dom>
                    </FormItem>
                </Col>
                <Col span="8" :offset="8">
                   <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text"  >收起∧</Button>
                   <Button @click="reset" class="ivu-btn-reset"  >重置</Button>
                   <Button   class="ivu-btn-query"   icon="md-search"  @click="query">查询</Button>
               </Col>
           </Row>
        </Form>
    
        <Table ref='table' :height="tableHeight"  no-data-text="没有查询到相关数据!" size="small" :loading="buttonLoading"
               highlight-row stripe border :columns="columns3" width="100%" :data="data1">
        </Table>
        <Page :total="pagedata.total"   :fromPage="pagedata.fromPage" :pageSize="pagedata.pageSize"
              @on-change="pageChange" @on-page-size-change='sizeChange' show-total show-sizer show-elevator/>
    </Layout>
</template>

<script>
    import cascaderDom from "../../../components/cascader-dom.vue"
		import {sessionStorage, cookie} from '@/common/cacheUtils.js';
    import {
        Api
    } from '../../../api/index.js'
    export default {
        components: {
            cascaderDom
        },
        data() {
            return {
                buttonLoading:false,
                switchFlag: false,
                orgId: '',
                orgName:'',
                userName: '',
                twoDate: ["",""],
                startDate: '',
                endDate: '',
                tableHeight: 450,
                pagedata: {
                    total: 0, //总条数
                    fromPage: 1, //从n条开始
                    pageSize: 10 //每页多少条
                },
                columns3: [{
                        // type: 'index',
                    title: '序号',
                        width: 80,
                        align: 'center',
                    render: (h, params) => {
                        return h('span', params.index + (this.pagedata.fromPage - 1) * this.pagedata.pageSize + 1);
                    }
                    },
                    {
                        title: '登陆时间',
                        /*width: 200,*/
                        align: 'center',
                        key: 'loginInTime'
                    },
                    {
                        title: '企业名称',
                        /*width: 200,*/
                        align: 'center',
                        key: 'orgName'
                    },
                    {
                        title: '用户名',
                        /*width: 200,*/
                        align: 'center',
                        key: 'userName'
                    },
                    {
                        title: '设备ID',
                        /*width: 200,*/
                        align: 'center',
                        key: 'deviceId'
                    },
                    {
                        title: '设备平台',
                        /*width: 200,*/
                        align: 'center',
                        key: 'devicePlatform'
                    }
                ],
                data1: [],
								currentUser: JSON.parse(sessionStorage('userId').get('userId')),
            }
        },
        watch: {
            "modal2": function(qw, er) {
                if (qw && this.tage) {
                    setTimeout(() => {
                        this.$refs.child.setCurrentOrg();
                    }, 100)
                } else {
                    this.$refs.child.resetCurrentOrg();
                }
            }
        },
        mounted: function() {
            this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 145;
            //页面加载执行的查询函数,返回的总条数,激活前端分页插件的页码功能.
            this.query();
        },
        methods: {
            switchQuery(flag){
                this.switchFlag = flag;
                if(!this.switchFlag){
                    this.tableHeight = this.tableHeight + 44;
                }else{
                    this.tableHeight = this.tableHeight - 44;
                }
            },
            formatDate(date, fmt) {
                if (/(y+)/.test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
                }
                let o = {
                'M+': date.getMonth() + 1,
                'd+': date.getDate(),
                'h+': date.getHours(),
                'm+': date.getMinutes(),
                's+': date.getSeconds()
                };
                for (let k in o) {
                if (new RegExp(`(${k})`).test(fmt)) {
                    let str = o[k] + '';
                    fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str));
                }
                }
                return fmt;
            },
            padLeftZero (str) {
                return ('00' + str).substr(str.length);
            },
            setOrgInfo(data) {
                this.orgId = data[data.length - 1];
            },
            sizeChange(size) {
                this.pagedata.pageSize = size
                this.query()
            },
            pageChange(pagenum) {
                this.pagedata.fromPage = pagenum
                this.query()
            },
            query() {
							  if (!this.orgId) {
							  	this.orgId = this.currentUser.companyId
							  }
                this.buttonLoading=true
                var endDate;
                var startDate = "";
                if(this.twoDate[0] != "")
                    startDate = this.formatDate(new Date(this.twoDate[0]),'yyyy-MM-dd hh:mm:ss');
                if(this.twoDate[1] != "")
                    endDate = this.formatDate(new Date(this.twoDate[1]),'yyyy-MM-dd hh:mm:ss');
                this.$http.get(Api.queryLoginInfoStatistics+"?fromPage="+(this.pagedata.fromPage-1)* this.pagedata.pageSize+"&pageSize="+
                this.pagedata.pageSize+"&orgId="+this.orgId+"&orgName="+this.orgName+"&userName="+this.userName+"&startDate="+
                startDate+"&endDate="+endDate, {}).then(res => {
                    this.pagedata.total = res.data.total;
                    this.data1 = res.data.data;
                    this.buttonLoading=false
                }).catch(e => {
                    this.$Message.error('请求失败');
                })
            },
            reset() {
                this.userName = '';
                this.orgId = '';
                this.orgName = '';
                this.twoDate = ["",""];
                this.$refs.queryOrgCascader.resetCurrentOrg();
                this.query();
            },

        }

    }
</script>

<style scoped lang="css">
    @import '../../../index.css';
</style>
